import React from 'react'
import { Text, View, TouchableOpacity, Image, Modal, Linking, ScrollView } from 'react-native'
import { Metrics, Colors, Fonts } from '../../Themes'
import { API, WINDOW } from '../../Services'
import styles from '../Styles/CommonContainerStyles'
import LdImage from '../../Components/LdImage'
import ListViewSeparator from '../../Components/ListViewSeparator'
import Swiper from 'react-native-swiper'
import ImageViewer from 'react-native-image-zoom-viewer'
import { createImageProgress } from 'react-native-image-progress'
import FastImage from 'react-native-fast-image'
const CaceImage = createImageProgress(FastImage)
import Moment from 'moment'
import { WebView } from 'react-native-webview';
import underscore from 'underscore'

class ProductDetailScreen extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            shop: this.props.route.params.item,
            images_visible: false,
            mediaSelectIndex: 0,
            isModalVisible: false,
            shareData: null,
            alpha: 0.00,
        }
    }

    componentDidMount() {
        this._fetch_getList()
    }

    _fetch_getList() {
        API.goodsDetails(this.state.shop.ID).then((response) => {
            if (response.ok) {
                this.setState({ shop: response.data.goods })
            }
        })
    }


    _renderHeader = () => {
        let params = this.state.shop
        return (
            <View>
                {this._renderSwiper()}
                <View>
                    <View style={{ padding: 15 }}>
                        <Text style={{ fontSize: 16, color: '#000000', marginBottom: 15 }}>{params.goodsName}</Text>
                        <ListViewSeparator />
                        <Text style={{ fontSize: 13, color: '#757575', marginTop: 13 }}>所在地 : {params.addressDetail || '北京'}</Text>
                        <Text style={{ fontSize: 13, color: '#757575', marginTop: 10 }}>价格 : {params.goodsPrice}</Text>
                        <Text style={{ fontSize: 13, color: '#757575', marginTop: 10 }}>发布时间 : {Moment(params.createTime).format("YYYY-MM-DD")}</Text>
                        <Text style={{ fontSize: 13, color: '#757575', marginTop: 10 }}>浏览 : {params.clickCount}</Text>
                        <View style={{ marginTop: 20 }} />
                        <ListViewSeparator />

                        <Text style={{ fontSize: 16, color: '#000000', marginTop: 25, marginBottom: 8 }}>详细信息</Text>
                    </View>
                    <View style={{ flex: 1, height: 3000 }}>
                        <WebView
                            style={{ backgroundColor: 'transparent' }}
                            source={{ html: params.goodsDescStr }}
                            originWhitelist={['*']}
                            javaScriptEnabled={true}
                        />
                    </View>
                    <ListViewSeparator />
                    <Text style={{ fontSize: 11, color: '#333333', marginTop: 8 }}>{params.desc}</Text>
                </View>
            </View>
        )
    }

    _renderAd(element, index) {
        return (
            <TouchableOpacity key={index} onPress={() => this.state.shop.goodsImg && this.setState({ images_visible: true })}>
                <LdImage
                    style={{ width: Metrics.screenWidth, height: PARALLAX_HEADER_HEIGHT }}
                    url={element}
                />
            </TouchableOpacity>
        )
    }

    _renderSwiper() {
        let params = this.state.shop
        return (
            <View style={{ height: PARALLAX_HEADER_HEIGHT, width: Metrics.screenWidth, backgroundColor: 'white' }}>
                <Swiper ref={(swiper) => { this.swiper = swiper }} height={PARALLAX_HEADER_HEIGHT} width={Metrics.screenWidth} autoplay onIndexChanged={(index) => { this.state.mediaSelectIndex = index }}>
                    {underscore.compact(params.goodsImg?.split(',')).map(this._renderAd.bind(this))}
                </Swiper>
            </View>
        )
    }

    _renderModal = () => {
        let images = []
        for (let index = 0; index < this.state.shop.goodsImg?.split(',').length; index++) {
            const element = this.state.shop.goodsImg?.split(',')[index];
            if ((element == null) || (element == '') || (element == undefined)) {
            } else {
                let image = {
                    url: WINDOW.getFullImage(element),
                    freeHeight: true,
                    width: Metrics.screenWidth,
                    height: Metrics.screenHeight,
                    props: {
                        priority: FastImage.priority.normal,
                        resizeMode: FastImage.resizeMode.contain
                    }
                }
                images.push(image)
            }
        }
        return (
            <Modal
                visible={this.state.images_visible}
                transparent={true}>
                <ImageViewer
                    imageUrls={images}
                    saveToLocalByLongPress={false}
                    renderImage={(props) => <CaceImage {...props} />}
                    index={this.state.mediaSelectIndex}
                    onClick={() => this.setState({ images_visible: false })}
                    enableSwipeDown={true} />
            </Modal>
        )
    }

    _renderBottom = () => (
        <View style={{ flexDirection: 'row', marginBottom: 0, paddingTop: 20, paddingBottom: 10, paddingHorizontal: 15 }}>

            <TouchableOpacity onPress={() => {
                Linking.openURL(`tel:${this.state.shop.user_tell}`)
            }} style={{ flex: 1, height: 45, flexDirection: 'row', backgroundColor: '#41A8F3', justifyContent: 'center', alignItems: 'center', borderRadius: 4 }}>
                <Image source={require('../../Images/xiangqing_icon_tel_normal.png')} />
                <Text style={{ fontSize: 12, color: 'white', marginLeft: 10 }}>拨打电话</Text>
            </TouchableOpacity>
        </View>
    )


    render() {
        return (
            <View style={styles.container}>
                {this._renderModal()}
                <ScrollView>
                    {this._renderHeader()}
                </ScrollView>
                {/* {this._renderBottom()} */}
            </View>
        )
    }
}

const PARALLAX_HEADER_HEIGHT = 280;

export default ProductDetailScreen
